'use client';
import {Button} from '@/components/ui/button';
import React, {useState} from 'react';

const Page = () => {
    // pdf文件
    const [pdfFile, setPdfFile] = useState(null);
    // pdf上传, 后端返回消息
    const [message, setMessage] = useState('');
    // pdf是否上传成功
    const [uploaded, setUploaded] = useState(false);

    // @ts-ignore
    const handleFileChange = (event) => {
        setPdfFile(event.target.files[0]);
    };

    // @ts-ignore
    const handlePDFSubmit = async (event) => {
        event.preventDefault();
        if (!pdfFile) {
            setMessage('Please upload a PDF file.');
            return;
        }

        const formData = new FormData();
        formData.append('file', pdfFile);
        console.log(pdfFile)

        try {
            const response = await fetch('http://127.0.0.1:8000/upload_pdf/', {
                method: 'POST',
                body: formData,
            });

            if (response.ok) {
                const data = await response.json();
                setMessage(data.message);
                setUploaded(true)
                setName(pdfFile.name)
            } else {
                setMessage('Failed to upload PDF.');
                setUploaded(false)
            }
        } catch (error) {
            console.error('Error:', error);
            setMessage('An error occurred while uploading.');
            setUploaded(false)
        }
    };


    // 简历名
    const [name, setName] = useState()
    // 学生名
    const [stuName, setStuName] = useState()

    const submit = async (e) => {
        e.preventDefault()
        console.log(name, stuName)

        const res = await fetch('http://localhost:3000/api/resume/add', {
            method: "POST",
            body: JSON.stringify({
                name, stuName
            }),
            headers: {
                "Content-Type": 'application/json'
            }
        })

        const json = await res.json()
        if (!json.resume) return alert(json)
        return alert('录入成功')
    }

    return (
        <div>
            <div className={'flex flex-col items-center gap-2'}>
                <form onSubmit={handlePDFSubmit} className={'flex flex-col gap-4 items-center justify-center'}>
                    <h1 className={'text-2xl'}>上传pdf</h1>
                    <input type="file" accept="application/pdf" onChange={handleFileChange} required/>
                    {!uploaded && <button
                        className={'ml-2 p-2 bg-green-200 rounded-lg'}
                        type="submit">
                        Upload
                    </button>}
                    {message && <p className={
                        uploaded ? 'text-green-500' : 'text-red-500'
                    }>{message}</p>}
                </form>
            </div>

            {uploaded && <form
                className={'gap-4 flex flex-col justify-center items-center mt-8'}
                onSubmit={submit}>
                <label className={'text-2xl'} htmlFor="name">简历名称</label>
                <input
                    className={'border border-black p-2 rounded-lg'}
                    name={'name'} type="text" value={name}
                    onChange={(e) => setName(e.target.value)}/>
                <label className={'text-2xl'} htmlFor="name">学生姓名</label>
                <input
                    className={'border border-black p-2 rounded-lg'}
                    type="text" value={stuName}
                    onChange={(e) => setStuName(e.target.value)}/>
                <Button>提交</Button>
            </form>}
        </div>
    );
};

export default Page;